<template>
	<!-- 学习计划添加 -->
	<div class="card">
		<!-- 标题区域 -->
		<div class="card-header">学习计划表</div>
		<!-- 提交区域 -->
		<div class="card-body">
			<form @submit.prevent="add">
				<div class="row g-4">
					<!-- 学习科目 -->
					<div class="col-auto">
						<div class="input-group mb-3">
							<span class="input-group-text" id="basic-addon1">学习科目</span>
							<input type="text" class="form-control" placeholder="请输入学习科目" v-model.trim="subject" />
						</div>
					</div>

					<!-- 学习任务 -->
					<div class="col-auto">
						<div class="input-group mb-3">
							<span class="input-group-text" id="basic-addon1">学习内容</span>
							<textarea class="form-control" v-model.trim="content" placeholder="请输入学习内容"
								:style="{ height: '32px' }"></textarea>
						</div>
					</div>

					<!-- 学习地点 -->
					<div class="col-auto">
						<div class="input-group mb-3">
							<span class="input-group-text" id="basic-addon1">学习地点</span>
							<select class="form-select form-select-sm" v-model="selectedOption">
								<option v-for="(item,i) in options" :value="item.place" :key="i">{{ item.place }}
								</option>
							</select>
						</div>
					</div>
					<!-- 添加按钮 -->
					<div class="col-auto">
						<button type="submit" class="btn btn-primary">添加</button>
					</div>
				</div>
			</form>
		</div>
	</div>

</template>

<script>
	export default {
		data() {
			return {
				subject: '', //学习科目 
				content: '', //学习内容 			
				selectedOption: '自习室', //学习地点 

				// 供选择的学习地方
				options: [
					{ placeCode: 0, place: '自习室' },
					{ placeCode: 1, place: '图书馆' },
					{ placeCode: 2, place: '宿舍' },
				],
			}
		},
		methods: {
			// 添加方法
			add() {
				// 学习科目不能为空
				if (this.subject === '') {
					alert('学习科目为必填项！')
					return
				}

				// // 生成学习计划记录的id值,数组中最大id值+1
				// let nextId = Math.max(...this.list.map(item => item.id)) + 1
				// // 学习计划表添加记录
				// this.list.push({
				// 	id: nextId,
				// 	subject: this.subject,
				// 	content: this.content,
				// 	place: this.selectedOption,
				// 	status: false,
				// })

				// 触发父组件自定义事件addItem并传参
				this.$emit('addItem', this.subject, this.content, this.selectedOption)
				// 变量重置初始值
				this.subject = ''
				this.content = ''
				this.selectedOption = '自习室'
			},
		},
	}
</script>

<style>
</style>